<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	a{text-decoration: none;color: inherit;}

	li{
		list-style: none;`

	}
	img {
		vertical-align: top;
	}
	.a{
		/*width: 100%;*/
		background-color: #111;
		/*line-height: 20px;
		padding-top: 80px;*/
		text-align: center;
		overflow: hidden;
		color: #fff;
		/*margin-left: auto;
		margin-right: auto;*/

	}
	.a img{
		width: 100px;
		height: 50px;

	}
	.a li{
		margin-top: 20px;
		line-height: 20px;
	}
	.a0{
		padding: 0 50px;
	}
	.a1 p{
		display:inline-block;
		margin: 0 5%;
	}
	.a2 img{
			width: 100%;

	}
	.a3 .a4{
		text-indent: 35px;
		/*text-indent: 35px;在文字前面加段落*/
		padding: 20px 0;
		border-top: 1px solid #111;
		border-bottom: 1px solid #111;
	}
	.a5{
		text-indent: center;
	}

	.a5 img{
		width: 100%;
		display: inline-block;
		margin:1%;
		float: left;
	}

	.a7{
		width: 31.3333%;
		margin: 1% 1%;
		float: left;
		position: relative;
	}
	.a7 img{
		width: 100%;
	}
	.a8{
		width: 100%;
		background-color:rgba(0,0,0,.5);
		bottom: 0;
		display: none;
		position: absolute;
		z-index: 1;
		/*line-height: 12px;
		*/
	}
	.a7:hover .a8{
		display: block;
	}

	





	
	
	@media screen and (min-width: 320px) and (max-width: 414px){
		.a7{
			width: 98%;
		}
		.a5 img{
			width: 48%;
		}
		.a img{
			height: 30px;
			width: 60px;
		}

	}
	@media screen and (min-width: 415px) and (max-width: 1024px){
		.a7{
			width: 48%;
		}
		.a5 img{
			width: 18%;
		}
		.a img{
			height: 30px;
			width: 60px;
		}
	}
	@media screen and (min-width: 1025px) {
		.a7{
			width: 31.3333%;
		}
		.a5 img{
			width: 8%;
		}
	}
	@media screen and (min-width: 1200px){
		.w{
			width: 1170px;
			margin-left: auto;
			margin-right: auto;
		}
	}
	</style>
</head>
<body>
	<ul class="a ">
	<div class="w">
	<li class="a0">
		<img src="../img/infini/1.png" alt="">
	</li>
	<li class="a1">
		<p><a href="">首页</a></p>
		<p>首页</p>
		<p>首页</p>
		<p>首页</p>
	</li>
	</div>
	</ul>
	<div class="a2 ">
 		<div class="w">
			<img src="../img/infini/16.jpg" alt="">
		</div>
	</div>
	<div class="a3">
		<div class="w">
			<div class="a4">啊沙发沙发发千万千万分地区发起我的钱请问对方确认放弃WR啊沙发沙发发千万千万分地区发起我的钱请问对方确认放弃WR啊沙发沙发发千万千万分地区发起我的钱请问对方确认放弃WR啊沙发沙发发千万千万分地区发起我的钱请问对方确认放弃WR
			</div>
		</div>
	</div>
	<div class="a5 w">
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			<div class="b">
			<img src="../img/infini/9.jpg" alt="">
			</div>
			
	</div>
	<div class="a6">
		<div class="w">
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
			<div class="a7">
				<img src="../img/infini/17.jpg" alt="">
				<div class="a8">aaa</div>
			</div>
		</div>
	</div>
</body>
</html>